<template>
  <section class="container">
    <div class="left_side" :class="{ 'animate-sidebar': isAnimated }">
      <el-menu
        class="sidebar"
        :default-active="$route.path"
        :default-openeds="openedMenus"
        @open="handleOpen"
        @close="handleClose"
        unique-opened
      >
        <el-sub-menu index="1">
          <template #title><B>课程信息管理</B></template>
          <el-menu-item class="childMenu" @click="goPage('/teacher/courseManage/courseInfoManage')">课程信息</el-menu-item>
          <el-menu-item class="childMenu" @click="goPage('/teacher/courseManage/courseStuManage')">学生信息</el-menu-item>
        </el-sub-menu>
        <el-sub-menu index="2">
          <template #title><B>智能知识库管理</B></template>
          <el-menu-item class="childMenu" @click="goPage('/teacher/courseManage/knowledgeUpload')">上传课程资料</el-menu-item>
          <el-menu-item class="childMenu" @click="goPage('/teacher/courseManage/knowledgeGenerate')">生成教学资料</el-menu-item>
          <el-menu-item class="childMenu" @click="goPage('/teacher/courseManage/knowledgeNewQuesOrExam')">题库与试卷管理</el-menu-item>
        </el-sub-menu>
        <el-menu-item index="3" class="subMenu" @click="goPage('/teacher/courseManage/AIassistant')"><b>AI助手</b></el-menu-item>
        <el-menu-item index="4" class="subMenu" @click="goPage('/teacher/courseManage/examDisplay')"><b>考试管理</b></el-menu-item>
        <el-menu-item index="5" class="subMenu" @click="goPage('/teacher/messageBox')"><b>消息管理</b></el-menu-item>
      </el-menu>
    </div>
    <div class="main_wrapper">
        <transition name="slide-fade" mode="out-in">
          <router-view></router-view>
        </transition>
    </div>
  </section>
</template>

<script>
export default {
  name: 'CourseManager',
  data() {
    return {
      activeMenu: '',      // 当前激活菜单项
      openMenus: [],       // 当前展开的父菜单
    }
  },
  methods: {
    handleOpen(index) {
      if (!this.openMenus.includes(index)) {
        this.openMenus.push(index);
      }
    },
    handleClose(index) {
      const i = this.openMenus.indexOf(index);
      if (i > -1) this.openMenus.splice(i, 1);
    },
    goPage(_path){
      this.$router.push({ path: _path})
    },
  },
  mounted() {
    this.goPage('/teacher/courseManage/courseInfoManage')
  },
}
</script>

<style lang="less" scoped>
.container {
  display: flex;
  // background-color: rgb(255, 255, 255, 1);
}
.left_side {
  position: fixed; /* 固定在顶部 */ 
  height: 100%;
  top:80px;
  width: 12%;
  background-color: hsla(210, 100%, 66%, 0.6);
  border-top: 1px solid #6098ff;
  border-right: 1px solid #6098ff;
}
.sidebar {
  height: 100%;
  border-right: none;
  background-color: hsla(210, 79%, 89%, 0.6);
}

/* 1. 让 menu-item 内部文字自动换行 */
.el-menu ::v-deep .el-menu-item,
.el-menu ::v-deep .el-sub-menu .el-menu-item {
  white-space: normal !important;    /* 允许换行 */
  word-break: break-word !important; /* 单词内也可折行 */
  overflow-wrap: anywhere;           /* 各浏览器折行兼容 */
  padding: 10px;                     /* 适当内边距 */
}

/* 父菜单标题背景蓝色，文字白色 */
.sidebar ::v-deep .el-sub-menu__title {
  background-color:  hsla(217, 100%, 85%, 0.6) !important;
  color: #004bbc !important;
}
.sidebar ::v-deep .el-sub-menu__title:hover {
  background-color: hsl(217, 100%, 65%, 0.6) !important;
  color: hsla(217, 100%, 85%, 0.6);
}
.subMenu {
  background-color:  hsla(217, 100%, 85%, 0.6) !important;
  color: #004bbc !important;
}
.subMenu:hover {
  background-color: hsl(217, 100%, 65%, 0.6) !important;
  color: hsla(217, 100%, 85%, 0.6);
}
/* 子菜单项背景白色，文字深色 */
.childMenu {
  background-color: #e9f4ff !important;
  color: #004d9a !important;
}
.childMenu:hover {
  background-color: #004bbc !important;
  color: #e9f4ff !important;
}
.main_wrapper {
  position: fixed;
  background-color: rgba(241, 251, 255, 0.8);
  overflow: auto;
  margin-top: 30px;
  width: 84%;
  height: 84%;
  margin-left: 14%;
}

/* 过渡动画定义 */
.slide-fade-enter-active,
.slide-fade-leave-active {
  transition: transform 0.5s ease-in-out;
  position: relative;
}

.slide-fade-enter, .slide-fade-leave-to {
  transform: translateX(100%);
}

.slide-fade-enter-to, .slide-fade-leave {
  transform: translateX(0);
}

</style>